<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue条件渲染</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>通过v-if控制标签是否渲染</h3>
			<p v-if="render">我会根据render的值动态显示、隐藏</p>
			
			<hr >
			
			<h3>v-if、v-else-if、v-else组合使用</h4>
			<p v-if="age < 15">我是if块中的内容：<span style="color: orange;">初生牛犊不怕虎，一浪更比一浪浪~</span></p>
			<p v-else-if="age < 60">我是else-if块中的内容：<span style="color: green">年轻无极限，统一冰红茶~</span></p>
			<p v-else>我是else块中的内容：<span style="color: #D7D7D7;">老了，但还能用</span></p>
			<hr >
			
			<h3>通过v-show控制标签是否显示</h3>
			<hr >
			<p v-show="render">我会根据render的值动态显示、隐藏(v-show)， 快打开控制台观察一下我和v-if的区别吧</p>
		</div>
	</body>
	<script type="text/javascript">
		let vm = new Vue({
			el: '#app',
			data: {
				render: true,
				// render: '同意渲染',
				age: 30
			}
		});
	</script>
</html>
